<!DOCTYPE html>
<html>
<head>
<title>Physics Experiment Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    border: 1px solid #eee;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="520"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = '16px Arial';

// Draw pan of balance
const panY = 400;
const panX = 150;
const panWidth = 200;
const panHeight = 10;
ctx.beginPath();
ctx.rect(panX, panY, panWidth, panHeight);
ctx.stroke();

// Balance stem
const stemX = panX + panWidth / 2;
ctx.beginPath();
ctx.moveTo(stemX, panY + panHeight);
ctx.lineTo(stemX, 450);
// Jagged bottom
ctx.lineTo(stemX - 10, 460);
ctx.moveTo(stemX, 450);
ctx.lineTo(stemX + 10, 460);
ctx.moveTo(stemX, 450);
ctx.lineTo(stemX - 5, 470);
ctx.stroke();

// Label for pan of balance
ctx.textAlign = 'left';
ctx.fillText('pan of balance', 360, 420);
ctx.beginPath();
ctx.moveTo(358, 418);
ctx.lineTo(350, 410);
ctx.stroke();


// Draw beaker
const beakerWidth = 120;
const beakerHeight = 180;
const beakerBottomY = panY;
const beakerX = stemX - beakerWidth / 2;
ctx.beginPath();
ctx.moveTo(beakerX, beakerBottomY);
ctx.lineTo(beakerX, beakerBottomY - beakerHeight);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(beakerX + beakerWidth, beakerBottomY);
ctx.lineTo(beakerX + beakerWidth, beakerBottomY - beakerHeight);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(beakerX, beakerBottomY);
ctx.lineTo(beakerX + beakerWidth, beakerBottomY);
ctx.stroke();
// Beaker rim
ctx.save();
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(beakerX - 1, beakerBottomY - beakerHeight);
ctx.lineTo(beakerX + beakerWidth + 1, beakerBottomY - beakerHeight);
ctx.stroke();
ctx.restore();


// Draw liquid
const liquidHeight = 130;
const liquidTopY = beakerBottomY - liquidHeight;
// Main surface line
ctx.beginPath();
ctx.moveTo(beakerX + 5, liquidTopY);
ctx.lineTo(beakerX + beakerWidth - 5, liquidTopY);
ctx.stroke();
// Meniscus
ctx.beginPath();
ctx.moveTo(beakerX, liquidTopY + 5);
ctx.quadraticCurveTo(beakerX, liquidTopY, beakerX + 5, liquidTopY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(beakerX + beakerWidth - 5, liquidTopY);
ctx.quadraticCurveTo(beakerX + beakerWidth, liquidTopY, beakerX + beakerWidth, liquidTopY + 5);
ctx.stroke();
// Dashed lines for liquid
ctx.save();
ctx.lineWidth = 0.7;
ctx.setLineDash([4, 4]);
for (let y = liquidTopY + 15; y < beakerBottomY; y += 15) {
    ctx.beginPath();
    ctx.moveTo(beakerX + 2, y);
    ctx.lineTo(beakerX + beakerWidth - 2, y);
    ctx.stroke();
}
ctx.restore();

// Label for liquid
ctx.textAlign = 'left';
ctx.fillText('liquid', 120, 240);
ctx.beginPath();
ctx.moveTo(120 + ctx.measureText('liquid').width, 240);
ctx.lineTo(210, 260);
ctx.stroke();


// Draw heater
const heaterBottomY = panY - 20;
const heaterH = 20;
const heaterW = 60;
const heaterX = stemX - heaterW / 2;
ctx.beginPath();
ctx.rect(heaterX, heaterBottomY - heaterH, heaterW, heaterH);
ctx.stroke();
// Heater segments
for (let i = 1; i < 4; i++) {
    ctx.beginPath();
    ctx.moveTo(heaterX + i * (heaterW / 4), heaterBottomY - heaterH);
    ctx.lineTo(heaterX + i * (heaterW / 4), heaterBottomY);
    ctx.stroke();
}

// Label for heater
ctx.textAlign = 'left';
ctx.fillText('heater', 130, 340);
ctx.beginPath();
ctx.moveTo(130 + ctx.measureText('heater').width, 340);
ctx.lineTo(215, 360);
ctx.stroke();

// Wires from heater
const heaterWireL = {x: heaterX, y: heaterBottomY - heaterH};
const heaterWireR = {x: heaterX + heaterW, y: heaterBottomY - heaterH};
ctx.beginPath();
ctx.moveTo(heaterWireL.x, heaterWireL.y);
ctx.lineTo(heaterWireL.x, 150);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(heaterWireR.x, heaterWireR.y);
ctx.lineTo(heaterWireR.x, 150);
ctx.stroke();

// --- Circuit ---
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Component positions
const v_center = {x: 350, y: 100};
const a_center = {x: 410, y: 125};
const meter_radius = 20;

// Draw Voltmeter and Ammeter circles
ctx.beginPath();
ctx.arc(v_center.x, v_center.y, meter_radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.stroke();
ctx.fillStyle = 'black';
ctx.fillText('V', v_center.x, v_center.y);

ctx.beginPath();
ctx.arc(a_center.x, a_center.y, meter_radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.stroke();
ctx.fillStyle = 'black';
ctx.fillText('A', a_center.x, a_center.y);

// Junction points
const j1 = {x: v_center.x - meter_radius, y: v_center.y};
const j2 = {x: a_center.x - meter_radius, y: v_center.y};
const j3 = {x: j2.x, y: a_center.y};

// Power terminals
const term_pos = {x: 480, y: 100};
const term_neg = {x: 480, y: 125};

// Draw wires
// + line
ctx.beginPath();
ctx.moveTo(term_pos.x, term_pos.y);
ctx.lineTo(v_center.x + meter_radius, v_center.y);
ctx.stroke();
// Connection from + line to heater left wire
ctx.beginPath();
ctx.moveTo(j1.x, j1.y);
ctx.lineTo(heaterWireL.x, j1.y);
ctx.lineTo(heaterWireL.x, 150);
ctx.stroke();

// - line
ctx.beginPath();
ctx.moveTo(term_neg.x, term_neg.y);
ctx.lineTo(a_center.x + meter_radius, a_center.y);
ctx.stroke();

// V to A connection
ctx.beginPath();
ctx.moveTo(v_center.x + meter_radius, v_center.y);
ctx.lineTo(j2.x, j2.y);
ctx.stroke();

// Heater Right to J2/J3
ctx.beginPath();
ctx.moveTo(heaterWireR.x, 150);
ctx.lineTo(heaterWireR.x, j2.y);
ctx.lineTo(j2.x, j2.y);
ctx.stroke();

// Vertical wire between J2 and J3
ctx.beginPath();
ctx.moveTo(j2.x, j2.y);
ctx.lineTo(j3.x, j3.y);
ctx.stroke();

// Junction dots
ctx.beginPath(); ctx.arc(j1.x, j1.y, 3, 0, 2 * Math.PI); ctx.fill();
ctx.beginPath(); ctx.arc(j2.x, j2.y, 3, 0, 2 * Math.PI); ctx.fill();
ctx.beginPath(); ctx.arc(j3.x, j3.y, 3, 0, 2 * Math.PI); ctx.fill();

// Terminal circles and labels
ctx.beginPath(); ctx.arc(term_pos.x, term_pos.y, 4, 0, 2 * Math.PI); ctx.stroke();
ctx.beginPath(); ctx.arc(term_neg.x, term_neg.y, 4, 0, 2 * Math.PI); ctx.stroke();
ctx.textAlign = 'left';
ctx.fillText('+', term_pos.x + 8, term_pos.y);
ctx.fillText('–', term_neg.x + 8, term_neg.y);


// Figure label
ctx.textAlign = 'center';
ctx.fillText('Fig. 3.1', stemX, 500);

</script>
</body>
</html>